<template>
	<view>
		<view class="header status_bar">
			<!-- <view class="back iconfont" @tap="backPage">&#xe6b5;</view> -->
			<!-- <view class="text"></view> -->
		</view>
		<view class="clear_box"></view>
		
		<view class="logo_box">
			<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/logo.png" mode="widthFix"></image>
		</view>

		<view class="public_title" :data-url="'/pages/index/index'" @click="gotopage">欢迎登录骑手端</view>
		<view class="zu">
			<!-- <text class="w1">还没有账号，</text>
			<text class="w2">立即注册</text> -->
		</view>

		<view class="input_list">
			<view class="icon iconfont">&#xe60e;</view>
			<view class="line"></view>
			<input type="text" value="" v-model="phone" placeholder="请输入手机号" />
		</view>
		
		<!-- <view class="input_list">
			<view class="icon iconfont">&#xe65d;</view>
			<view class="line"></view>
			<input type="text" password="true" value="" v-model="password" placeholder="请输入密码" />
		</view> -->

		<view class="input_list">
			<view class="icon iconfont">&#xe610;</view>
			<view class="line"></view>
			<input type="text" value="" v-model="yzm" placeholder="请输入验证码" />
			<button plain="false" class="yzm" @click="getCode" :disabled="disabled">
				{{ countdown }}
				<text v-show="timestatus">秒重获</text>
			</button>
		</view>
		
		
		<!-- <view class="other_box">
			<view class="other" :data-url="'/pages/public/register'" @click="gotopage">注册账号</view>
			<view class="other" :data-url="'/pages/public/retrieve'" @click="gotopage">找回密码</view>
		</view> -->

		<button class="confirm02" @tap="loginData">登录</button>
		<!-- <view class="public_text02">第三方登录</view>
 -->
		<!-- <button type="primary" @click="loginByWeixin" plain="false" class="wx_box">
			<image src="../../static/wx.png" mode="widthFix"></image>
		</button> -->
		
		<view class="rule_list" @tap="checkedAuto">
			<checkbox style="scale: 0.8;" color="#FF7F22" :checked="checked"></checkbox>
			<view>
				我同意并阅读
				<text style="color: #999;" :data-url="'/pages/personalcenter/privacy?type=' + 8" @click="gotopage">《平台隐私政策》和</text>
				<text style="color: #999;" :data-url="'/pages/personalcenter/privacy?type=' + 11" @click="gotopage">《平台注册协议》</text>
			</view>
		</view>
		
		<view class="jion" :data-url="'/pages/personalcenter/join'" @click="gotopage">-申请成为巢小哥-</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: false,
			select: 0,
			menu: [
				{
					text: '密码登录'
				},
				{
					text: '快捷登录'
				}
			],
			countdown: '获取验证码',
			disabled: false,
			timestatus: false,
			clear: '',
			phone: '',
			yzm: '',
			password:'',
		};
	},
	onLoad() {
		if(this.Net._getToken() != '') {
			uni.navigateTo({
				url: '/pages/index/index',		
			});
		}
	},
	methods: {
		checkedAuto() {
			let that = this;
			that.checked = !that.checked;
		},
		loginData() {
			var that = this;
			if (!that.phone) {
				that.Msg.Fail('请输入手机号');
				return;
			}
			// if (!that.password) {
			// 	that.Msg.Fail('请输入密码');
			// 	return;
			// }
			if (!that.yzm) {
				that.Msg.Fail('请输入验证码');
				return;
			}
			
			if (that.checked == false) {
				that.Msg.Fail('请勾选协议');
				return;
			}

			that.Net._post('terminal/login', { username: that.phone,code:that.yzm,grant_type:'password'}, res => {
				if (res.code == 200) {
					//console.log(res.data.access_token);
					that.Net._setToken(res.data.access_token);
					that.Msg.Success('登陆成功', res => {
						that.Nav._to({ url: '/pages/index/index', type: 0 });
					});
				} else if (res.code != 200) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
		backPage() {
			uni.navigateBack({});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			console.log(url)
			uni.navigateTo({
				url: url
			});
		},
		setNavMenu(e) {
			let index = e.currentTarget.dataset.index;
			this.select = index;
		},
		// 获取验证码
		getCode() {
			var that = this;
			if (!that.phone) {
				that.Msg.Fail('手机号不能为空');
				return;
			}

			that.disabled = true; //禁用点击
			that.countdown = 60;
			that.timestatus = true;
			that.clear = setInterval(that.countDown, 1000);

			that.Net._post('sms', { phone: that.phone }, res => {
				//console.log(res);
				if (res.code == 200) {
					that.Msg.Success('发送成功');
				} else {
					that.Msg.Success(res.msg);
				}
			});
		},
		// 倒计时
		countDown() {
			var that = this;
			if (!that.countdown) {
				that.disabled = false;
				that.timestatus = false;
				that.countdown = '获取验证码';
				clearInterval(that.clear);
			} else {
				--that.countdown;
			}
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.header .back {
	font-size: 5vw;
	line-height: 13.5vw;
	color: #333;
	width: 14.5vw;
	text-align: center;
}
.w1 {
	color: #a4a4a4;
}
.w2 {
	color: #FF7F22;
}
.public_title {
	width: 84%;
	margin: 0 auto;
	font-size: 5.5vw;
	color: #333;
	font-weight: bold;
}
.zu {
	font-size: 4vw;
	width: 92%;
	margin: 0 auto;
	margin-top: 1vw;
	margin-bottom: 8vw;
}

.nav {
	width: 100%;
	height: 13.5vw;
	overflow: hidden;
	overflow-x: auto;
	/* position: fixed;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 99; */
	/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
	box-sizing: border-box;
	margin: 9vw 0;
}

.nav .navauto {
	width: 100%;
	display: flex;
	/* margin-left: 4%; */
	min-width: 100%;
}

.nav .navauto .menu {
	width: 50%;
	position: relative;
}

.nav .navauto .menu .text {
	font-size: 4vw;
	color: #999;
	text-align: center;
	line-height: 13.5vw;
}

.nav .navauto .menu .line {
	width: 16%;
	height: 2.5px;
	background-color: transparent;
	border-radius: 3vw;
	position: absolute;
	left: calc(50% - 8%);
	bottom: 1.5vw;
}

.menucolor {
	color: #333 !important;
	font-weight: bold;
	font-size: 4.5vw !important;
}

.menucolor02 {
	background-color: #ff5301 !important;
}

.input_list {
	width: calc(84%);
	height: 13.5vw;
	margin: 0 auto;
	border-radius: 13.5vw;
	display: flex;
	position: relative;
	margin-top: 5vw;
	padding-left: 3vw;
	background-color: #f6f6f6;
}

.input_list .icon {
	font-size: 6vw;
	color: #333;
	width: 14vw;
	line-height: 13.5vw;
	height: 13.5vw;
	text-align: center;
}

.input_list .line {
	width: 1px;
	height: 6vw;
	margin-top: 3.75vw;
	background-color: #dedfdf;
}

.input_list input {
	flex: 1;
	font-size: 14px;
	height: 50px;
	line-height: 50px;
	color: #333;
	margin-left: 4vw;
}

.input_list .forget {
	width: 20vw;
	text-align: left;
	line-height: 13.5vw;
	font-size: 3.5vw;
	color: #1d1f24;
	margin-left: 2vw;
}

.input_list .yzm {
	font-size: 3.5vw;
	color: #1d1f24;
	font-weight: bold;
	position: absolute;
	line-height: 13.5vw;
	right: 0.3vw;
	top: 0;
	outline: none;
	border: 0px solid #fff !important;
	background-color: transparent !important;
}

.public_text {
	width: 100%;
	text-align: center;
	font-size: 3.5vw;
	color: #ff5301;
	height: 13.5vw;
	line-height: 13.5vw;
}

.public_text02 {
	width: 100%;
	text-align: center;
	font-size: 3.2vw;
	color: #ccc;
	height: 13.5vw;
	line-height: 13.5vw;
	margin-top: 6vw;
}

.wx_box {
	width: 100%;
	margin-top: 6vw;
	text-align: center;
	border: 0px solid #f00 !important;
	margin-bottom: 15vw;
}

.wx_box image {
	width: 12.5vw;
}
.confirm02 {
	width: 80%;
	height: 12vw;
	border-radius: 12vw;
	line-height: 12vw;
	text-align: center;
	background-color: #FF7F22;
	color: #fff;
	font-size: 4vw;
	margin: 0 auto;
	margin-top: 13.5vw;
}

.logo_box{
	width: 100%;
	text-align: center;
	margin-bottom: 4%;
}

.logo_box image{
	width: 30vw;
}

.other_box{
	width: 80%;
	margin: 2vw auto;
	display: flex;
	justify-content: space-between;
}

.other_box .other{
	font-size: 3.5vw;
	color: #666;
}

.rule_list {
	width: 84%;
	margin: 5vw auto 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.jion{
	width: 100%;
	font-size: 3.5vw;
	color: #666;
	position: fixed;
	left: 0;
	bottom: 10vw;
	text-align: center;
}
</style>
